<%--
  Created by IntelliJ IDEA.
  User: Jcdz
  Date: 2019/10/1
  Time: 19:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link  rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/department.css">
</head>

<body>
    <div>
        <jsp:include page="../nav/nav.jsp"></jsp:include>
        <!-- 常见疾病科室 -->
        <div class="bt">
            <span>&nbsp;常见疾病科室</span>
        </div>
        <hr color="green">

        <!-- 常见科室导航 -->
        <div class="ksdh">
            <ul>
                <li style="float: left;"><a href="departmentDetil.html">神经内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">消化内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">呼吸科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">普通内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">神经外科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">妇科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">产科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">儿科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">新生儿科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">骨科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">眼科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">耳鼻喉&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">神经内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">消化内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">呼吸科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">普通内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">神经外科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">妇科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">产科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">儿科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">新生儿科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">骨科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">眼科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">耳鼻喉&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">神经内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">消化内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">呼吸科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">普通内科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">神经外科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">妇科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">产科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">儿科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">新生儿科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">骨科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">眼科&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                <li style="float: left;"><a href="departmentDetil.html">耳鼻喉&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
            </ul>
        </div>
    </div>

    <div class="d1" style="margin-top: 20px;">
        <!-- 左半部分 -->
        <div style="width: 20%; border:2px solid rgb(199, 221, 199);">
            <ul class="nav nav-pills nav-stacked" style="font-size: 17px; line-height:2px;">
                <c:forEach items="${departmentList}" var="dept">
                    <li><a href="#${dept.deptName}"><span class="glyphicon glyphicon-heart"
                                               style="color: rgb(0, 167, 0); font-size: 15px;"></span> &nbsp;${dept.deptName}</a></li>
                </c:forEach>
            </ul>
        </div>


        <!-- 右半部分 -->
        <div style="width: 78%;border:2px solid rgb(199, 221, 199);float: right; margin-top: -1327px;" class="courseList">
            <c:forEach items="${voList}" var="v">
            <table class="table table-hover" style="margin-top: 3px;">
                <thead>
                <tr>
                    <h5>
                        <th>
                            <span id="${v.name}">${v.name}</span>
                        </th>
                    </h5>
                </tr>
                </thead>
                <tbody>
                <tr>
                <c:forEach items="${v.list}" var="l">
                    <td><a href="/treatment/doctor?fid=${l.deptId}&sid=${l.id}">${l.sdeptName}</a></td>
                </c:forEach>
                </tr>

                </tbody>
            </table>
            </c:forEach>
        </div>

    </div>

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="plugins/bootstrap/js/bootstrap.js"></script>

    <script>
        $.ajax({
            dataType:"test",
            url:basePath+'showmessage/department',
            data:{
                courseBox:types
            },success: function (msg) {
                $('#courseList').html(msg);
            }
        });
    </script>
</body>

</html>